<template>
	<view class="energize-detail" :style="{'height':height+'px'}">
		<view class="info">
			<view class="titel">
				<text>
					{{details.abilityName}}
				</text>
			</view>
			<view class="remark">
				<!-- {{details.abilityRemark}} -->
				<quill-editor disabled v-if="details" v-model="details.abilityRemark" class="ql-editor" />
			</view>
		</view>

		<view class="footer" style="bottom: 0;background-color: #fff;padding:24rpx 0">
			<button type="primary" class="back-btn" @click="back">返回</button>
			<button type="primary" style="background-color: #0B4E9E;" @click="jumpApply">我有需求</button>
		</view>
	</view>
</template>

<script>
	import api from 'api/modules/energize.js';
	export default {
		data() {
			return {
				details: "",
				height: ''
			}
		},
		components: {
			quillEditor,
		},
		onLoad: function(option) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('someEvent', (option) => {
				this.details = option.data
			})
			let _this = this
			uni.getSystemInfo({
				success(res) {
					_this.height = res.windowHeight
				}
			});
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			jumpApply() {
				uni.navigateTo({
					url: `/pages/views/energize/Apply?abilityId=[${this.details.abilityId}]`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		.energize-detail {
			.info {
				padding: 32rpx 24rpx;
				box-sizing: border-box;

				.titel {
					margin-bottom: 40rpx;
					text-align: center;
					text {
						display: inline-block;
						font-size: 36rpx;
						font-weight: 600;
						position: relative;

						&::after {
							position: absolute;
							height: 6rpx;
							content: '';
							display: block;
							width: 100%;
							background-color: #0B4E9E;
							opacity: 0.18;
							bottom: -10rpx;
						}
					}
				}

				.remark {
					padding: 24rpx 32rpx;
					border: 1rpx solid #D9DDE7;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
